<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="//cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="//cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

<h1>html5大文件切割上传</h1>
<div id="bar" style="">
    <span id="progress">0%</span>
</div>
<input name="mov" type="file" />
<input id="btn" type="button" value="点我" />

<script type="text/javascript">
    $(function(){
        $('#btn').click(function() {
            sendfile();
        });
    })

    function sendfile() {
        const LENGTH = 1024*1024;
        var sta  = 0;
        var end  = sta + LENGTH;
        var blob = null;
        var fd   = null;
        var xhr  = null;
        var per  = 0;
        var file = document.getElementsByName('mov')[0].files[0];
        var size = file.size;
        timer    = setInterval(function() {
            if (sta > size) {
                clearInterval(timer);
            }
            blob = file.slice(sta, end);
            fd   = new FormData();
            fd.append('tmp',  blob);
            fd.append('name', file.name);
            xhr  = new XMLHttpRequest();
            xhr.open('POST', "/bigfile/index/upload", false);
            xhr.send(fd);
            sta  = end;
            end  = sta + LENGTH;
            per  = 100 * end / size;
            if(per > 100) {
                per = 100;
            }
            $('#bar').css({'width':per+'%', 'background-color':'red'});
            $('#progress').html(parseInt(per)+'%');
        }, 1)
    }
</script>

</body>
</html>